<template>
  <view>
    <view class="header">
      <text v-if="destAddr == ''">全部</text>
      <text>{{ destAddr }}</text>
      <image src="../../static/iocn16.png" mode=""></image>
      <text v-if="origAddr == ''">全部</text>
      <text>{{ origAddr }}</text>
      <text>({{ totalCount }}条)</text>
    </view>
    <view class="body">
      <view class="container" v-for="(item, index) in list">
        <view class="fl">
          <u--image
            :showLoading="true"
            :src="item.imgUrl"
            width="135upx"
            height="135upx"
            radius="6"
          ></u--image>
        </view>
        <view class="fr">
          <view class="text_a" @click="tozhuanxian(item)">
            <u--text
              :prefixIcon="item.icon"
              :text="item.partnerName"
              :lines="1"
              bold
            >
            </u--text>
          </view>
          <view class="text_b" @click="tozhuanxian(item)">
            <u--text
              prefixIcon="map"
              :text="item.detailedAddress"
              :lines="1"
            ></u--text>
          </view>
          <view class="text_b" @click="tozhuanxian(item)">
            <u--text
              prefixIcon="share"
              :text="item.routeName"
              :lines="1"
            ></u--text>
          </view>
          <view class="text_c" @click="bohao(item.contactPhone)">电话联系</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { GetDedLines, RouteSetting } from "@/public/Api/update.js";
import { setValue, getValue } from "@/public/storeage/index.js";
import Tabbar from "@/pages/navigation/navigation.vue";
export default {
  components: {
    //注册组件
    Tabbar,
  },
  data() {
    return {
      list: [],
      pageIndex: 1,
      maxResultCount: 10,
      origAddr: "",
      destAddr: "",
      keywords: "",
      totalCount: 0,
    };
  },
  onLoad(option) {
    console.log(option);
    this.destAddr = option.destAddr;
    this.origAddr = option.origAddr;
    this.keywords = option.keywords;
  },
  onShow() {
    this.GetDedLines();
  },
  //监听页面触底函数
  onReachBottom() {
    this.pageIndex += 1;
    this.GetDedLines();
  },
  methods: {
    async GetDedLines() {
      var skipCount = (this.pageIndex - 1) * this.maxResultCount;
      var maxResultCount = this.maxResultCount;
      var origAddr = this.origAddr;
      var destAddr = this.destAddr;
      var keywords = this.keywords;
      try {
        const { data: res } = await GetDedLines({
          skipCount,
          maxResultCount,
          origAddr,
          destAddr,
          keywords,
        });
        console.log(res);
        this.list = this.list.concat(res.result.items);
        this.list.forEach((element) => {
          if (element.imgUrl == null) {
            element.imgUrl =
              "https://syh-1.oss-cn-shanghai.aliyuncs.com/nopic.png";
          }
          element.icon = "info";
          if (element.isVIP) {
            element.icon = "integral";
          }
        });
        this.totalCount = res.result.totalCount;
        if (res.result.totalCount == 0) {
          uni.navigateBack({
            delta: 1, //返回层数，2则上上页
            duration: 2000,
          });
          uni.showToast({
            title: `未查到路线`,
            duration: 2000,
          });
          return false;
        }
      } catch (e) {}
    },
    // 拨打电话
    bohao(item) {
      let phone = item;
      uni.makePhoneCall({
        phoneNumber: phone,
        success: (res) => {},
        fail: (res) => {
          console.log("打电话失败了");
        },
      });
    },
    tozhuanxian(item) {
      var id = item.id;
      uni.navigateTo({
        url:
          "/pages/Findspecialline/zhuanxian?id=" +
          id +
          "&contact=" +
          item.contact +
          "&contactPhone=" +
          item.contactPhone +
          "&officeTelphone=" +
          item.officeTelphone +
          "&detailedAddress=" +
          item.detailedAddress +
          "&partnerName=" +
          item.partnerName +
          "&purposeName=" +
          item.purposeName +
          "&routeName=" +
          item.routeName +
          "&imgurl=" +
          item.imgUrl +
          "&contactPhone=" +
          item.contactPhone,
      });
    },
    // 获取通话记录
    async RouteSetting() {
      var skipCount = this.skipCount;
      var maxResultCount = this.maxResultCount;

      var id = getValue("id");
      try {
        const { data: res } = await RouteSetting({
          skipCount,
          maxResultCount,
          id,
        });
      } catch (e) {}
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  padding: 0 15upx;
}

.header {
  width: 97%;
  border-radius: 17upx;
  background: #ffffff;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5,
    1.75upx 1.75upx 7.01upx 0px #e5e5e5;
  padding: 30upx 20upx;
  align-items: center;
  position: fixed;
  top: 0;

  text {
    padding: 0 10upx;
    font-size: 30upx;
    font-weight: 600;
  }

  image {
    padding: 0 10upx;
    width: 32upx;
    height: 32upx;
  }
}

.body {
  margin-top: 100upx;
}

.container {
  border-radius: 17upx;
  background: #ffffff;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5,
    1.75upx 1.75upx 7.01upx 0px #e5e5e5;
  padding: 30upx 50upx;
  margin-top: 20upx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .fl {
    width: 135upx;
    height: 135upx;

    image {
      width: 135upx;
      height: 135upx;
    }
  }

  .fr {
    width: 585upx;
    padding-left: 40upx;

    .text_a {
      color: #000;
      font-weight: bold;
      image {
        width: 32upx;
        height: 32upx;
        margin-top: 10px;
        margin-right: 10upx;
      }
    }

    .text_d {
      font-size: 28upx;
      color: #383838;
    }

    .text_b {
      display: flex;
      align-items: left;
    }

    .text_c {
      width: 133upx;
      height: 51upx;
      background-color: #ef4d3d;
      font-size: 24upx;
      color: #fff;
      text-align: center;
      line-height: 51upx;
      border-radius: 10upx;
      margin-top: 25upx;
      float: right;
    }
  }
}
</style>
